<template>
	<comRoot :isShowLimitWarm="true" @execAfterToken="execAfterToken">
		<template #page>

			<view class="competition-page relative">

				<view class="competition-list-content relative">
					<comDetailNavigateBack :title="info.gyms_name" />

					<!-- 背景 -->
					<image class="bg" style="width: 100%;height: 3500rpx;" :src="info.gyms_detail_image" mode="">
					</image>

					<!-- 阶梯 -->
					<view class="list-content absolute">

						<!-- 层 -->
						<view :class="['list-content-item absolute', 'level-' + (index + 1)]"
							:style="{
								width: item.widthBg,
								height: item.heightBg,
								left: item.leftBg,
								bottom: item.bottomBg,
							}"
							v-for="(item, index) in levelList" :key="index" @click="gooDetailFun(item)">

							<image class="bg" 
								:src="item.challenge_status === 0 ? item.mini_image_2 : item.mini_image_1"
								mode=""></image>
								
							<view class="absolute list-item-title font-hanserif-bold">
								{{ item.levelName }}
							</view>
							
							<!-- 
								medal_status
								徽章状态:0=未达成,1=可领取,2=已领取
								
								challenge_status
								挑战状态:0=未挑战,1=挑战中,2=完成挑战
							 -->
							<!-- 挑战成功 -->
							<image class="success-challenge-icon absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/success-challenge-icon.png`"
								v-if="item.challenge_status === 2" mode=""></image>
							<!-- 正在挑战 -->
							<image class="being-challenge-icon absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/being-challenge-icon.gif`"
								v-else-if="item.challenge_status === 1" mode=""></image>
							<!-- 未完成挑战 -->
							<!-- <image class="nostart-challenge-icon absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/nostart-challenge-icon.png`"
								v-else mode=""></image> -->

							<!-- 可领 -->
							<image class="receive-btn absolute"
								:class="item.challenge_status === 1 ? 'receive-btn-challenge' : ''"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/receive-icon.png`"
								v-if="item.medal_status === 1" mode="" @click.stop="receiveBtn(item, index)"></image>
							<!-- 已领 -->
							<image class="receive-btn absolute"
								:class="item.challenge_status === 1 ? 'receive-btn-challenge' : ''"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/noreceive-icon.png`"
								v-else-if="item.medal_status === 2" mode=""></image>
							<!-- 最后一层 预览 -->
							<image class="receive-btn absolute preview-receive-btn"
								:class="item.challenge_status === 1 ? 'receive-btn-challenge' : ''"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/preview-icon.png`"
								v-else-if="index === 8" mode="" @click.stop="openBoxMask"></image>
						</view>
					</view>

					<!-- 侧边栏 -->
					<view class="side-btn-box fixed" :class="[isPlatformPC ? 'overflowViewPC' : '']">
						<!-- 玩法说明 -->
						<image class="side-btn"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/rule-icon.png`"
							@click="setShowRuleFun"></image>
							
						<!-- 兑换 -->
						<view class="exchange-box relative" @click="openRewardMask">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-icon.png`"
								mode="">
							</image>
							<image class="exchange-box-flag absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-convertible-icon.png`"
								v-if="medal_reward_status" mode=""></image>
							<view class="relative exchange-time">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/time-txt-bg.png`"
									></image>
								<view class="relative">{{ countdownTime }}</view>
							</view>
						</view>
						
						<!-- 补剂 -->
						<view class="side-btn relative" @click="getTonicDialog" v-if="supplyFlag">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-icon.png`"
								mode=""></image>
							<image class="side-btn-flag absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-receive-icon.png`"
								v-if="supplyDot" mode=""></image>
							<view class="relative exchange-time">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/time-txt-bg.png`"
									></image>
								<view class="relative">{{ countdownTime }}</view>
							</view>
						</view>
						
						<!-- 记录 -->
						<image class="side-btn"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/record-icon.png`"
							mode=""
							@click="gooPageFun(`/secondary/competitionRecordPage/competitionRecordPage?gyms_id=${gyms_id}&fromlink=competitionSence`)"></image>
						
						<!-- 名人堂 -->
						<image class="side-btn"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/halloffame-icon.png`"
							mode="" @click="gooPageFun(`/secondary/competitionHallFamePage/competitionHallFamePage?gyms_id=${gyms_id}&fromlink=competitionSence`)"></image>
						
						<!-- 赏袋 -->
						<image class="side-btn" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/bag-icon.png`"
							mode=""
							@click="gooPageUrl"></image>
							
						<!-- 刷新 -->
						<image class="side-btn"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/refresh-icon.png`"
							mode=""
							@click="setRefreshFun"></image>
						
							
						<!-- 按钮 -->
						<view class="page-bottom-content fixed">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/page-bottom-bg.png`"
								mode="">
							</image>
							
							<button open-type="share" class="share-button absolute" @click="share">
								<image class="share-button-img" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/competition/share-icon.png`" mode=""></image>
							</button>
							
							<image class="goto-btn absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/goto-challenge-btn.png`"
								mode=""
								@click="goCompeDetailFun"></image>
							<view class="goto-title absolute font-hanserif-bold">
								<text>当前：</text>
								<text class="goto-title-txt">{{ levelList[nowLevel].levelName }} - {{ levelList[nowLevel].name }}</text>
							</view>
							
							<image class="all-receive-box absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/all-receive-btn.png`"
								mode="" @click="allReceive"></image>
						</view>
					</view>

					<!-- 徽章领取弹窗 -->
					<view class="mask-view" v-if="rewardDialog" :zoom="true" @click="closeRewardDialog">
						<view class="reward-box absolute font-hanserif-bold" @click.stop="rewardDialog = true">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/medal-box-bg.png`"
								mode="">
							</image>
					
							<view class="reward-text absolute flex-all-center">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/reward-box-txt-bg.png`"
									mode="">
								</image>
								<view class="text relative truncate">徽章 </view>
								<text class="relative"> * {{ dialog_medal_num }}</text>
							</view>
							
							<image class="tips absolute"
								@click.stop="closeRewardDialog"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/reward-box-tip-bg.png`"
								mode="">
							</image>
						</view>
					</view>
					
					<!-- 宝箱弹框 -->
					<view class="mask-view" v-if="boxMask" :zoom="true" @click.stop="closeBoxMask">
						<view class="box-content absolute font-hanserif-bold" @click.stop="boxMask = true">
							<image class="bg" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/reward-box-bg.png`"
								mode=""></image>
							<view class="box-content-list absolute flex">
								<view class="bag-goods-list flex-justify-content-between flex-wrap" v-if="gymsInfo.reward_item && gymsInfo.reward_item.length">
									<view class="content-pool-detail relative" v-for="(subItem, subIndex) in gymsInfo.reward_item" :key="subIndex" @click="gooShopDetailFun(subItem, subIndex)">
										<view class="bag-goods-type absolute" v-if="subItem.reward_item_type">
											<image class="bag-goods-type-img relative"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + subItem.reward_item_type.toLowerCase() + '.png'"
												mode="heightFix"></image>
										</view>
										<view class="content-pool-cover relative flex-all-center">
											<image class="bg absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/small-border-${subItem.reward_item_type && subItem.reward_item_type.toLowerCase()}.png`" mode=""></image>
											<comPlaceImage
												class="pool-cover-img"
												placeImageClass="flex-all-center"
												:lazyLoad="true"
												:src="subItem.reward_item_cover"
												mode="heightFix"></comPlaceImage>
										</view>
										<view class="content-pool-txt" v-if="showNoticeTxtFun(subItem.reward_item_name, 8)" style="margin-top: 10rpx;">
											<uni-notice-bar
												class="uni-notice-bar"
												color="#23220C"
												background-color="transparent"
												:scrollable="true"
												:single="true"
												:text="showNoticeTxtFun(subItem.reward_item_name, 8)"
												:speed="54"
											></uni-notice-bar>
										</view>
										<view class="content-pool-txt truncate" v-else>{{ subItem.reward_item_name }}</view>
										<view class="content-item-price text-nowrap">
											抽价：
											<text class="price">{{ subItem.recovery_price }}</text>
										</view>
										<view class="content-item-rate text-nowrap">
											概率：
											<text class="rate">{{ subItem.reward_rate }}</text>
										</view>
									</view>
									<view class="content-pool-detail relative"></view>
								</view>
								
								<view v-else-if="gymsInfo.reward_item && !gymsInfo.reward_item.length && !previewLoading" style="z-index: 0">
									<comEmptyData></comEmptyData>
								</view>
								
								<comLoading style="width: 100%;height: 100%;" v-if="previewLoading"></comLoading>
							</view>
							
							<image class="box-close-box absolute" 
								@click.stop="closeBoxMask"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-img.png`" mode=""></image>
								
						</view>
					</view>
					
					<!-- 兑换弹框 -->
					<view class="mask-view" v-if="rewardMask" :zoom="true" @click.stop="closeRewardMask">
						<view class="reward-content absolute font-hanserif-bold" @click.stop="rewardMask = true">
							<image class="bg change-box-bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-box-bg.png`"
								mode="">
							</image>
							<image class="reward-close absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-close-icon.png`"
								mode=""
								@click.stop="closeRewardMask"></image>
							
							<!-- 倒计时 -->
							<view class="countdown-time relative flex-all-center">
								<view class="flex-end flex-align-items-center">
									<text>倒&nbsp;计&nbsp;时：</text>
								</view>
								<view class="flex">
									<text class="time-box flex-all-center">{{ countdownObj.h }}</text>
									:
									<text class="time-box flex-all-center">{{ countdownObj.m }}</text>
									:
									<text class="time-box flex-all-center">{{ countdownObj.s }}</text>
								</view>
								&nbsp;清空
							</view>
							
							<!-- 徽章总数 -->
							<view class="badge-box relative flex-align-items-center">
								<view class="flex-end flex-align-items-center">
									<image class="badge-img"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-badge-icon.png`"
										mode="">
									</image>
									<text>当前拥有徽章数量：</text>
								</view>
								<view>
									<text class="badge-num">{{ scene_medal_count }}</text>
								</view>
							</view>
							
							
							<view class="reward-list-box absolute">
								<view class="reward-item relative flex-justify-content-between flex-align-items-center" 
									v-for="(item, index) in rewardConfig" :key="index">
									<view class="change-left">
										<view class="exchange-left-box relative flex-all-center">
											<image class="bg"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-left-box-bg.png`"
												mode=""></image>
											<image class="exchange-left-img relative"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-badge-icon.png`"
												mode=""></image>
											<view class="exchange-left-num absolute">
												<image class="bg"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-num-bg.png`"
													mode=""></image>
												<text class="relative">x{{ item.medal_num }}</text>
											</view>
										</view>
									</view>
									
									<view class="exchange-center">
										<image class="center-img-box"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-center-img.png`"
											mode=""></image>
										<!-- <view class="center-img-txt">兑换</view> -->
									</view>
									
									<view class="change-left change-right flex">
										<view v-for="(subItem, subIndex) in item.reward_items"
											:key="subIndex">
											<view class="exchange-left-box relative flex-all-center">
												<image class="bg"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-right-box-bg.png`"
													mode=""></image>
												<image class="change-right-img relative"
													:src="subItem.reward_item_cover" mode="heightFix"></image>
												<view class="exchange-left-num absolute">
													<image class="bg"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-num-bg.png`"
														mode=""></image>
													<text class="relative">x{{ subItem.item_num }}</text>
												</view>
											</view>
										</view>
									</view>
									
									<view class="exchange-btn relative flex-all-center" @click="receive(item)">
										<image class="btn-img bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-btn-bg.png`"
											mode=""></image>
										<!-- <view class="btn-text relative">兑换</view> -->
									</view>
									
									<view class="reward-item-gap absolute" v-if="rewardConfig && index !== (rewardConfig.length - 1)"></view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 兑换确认 -->
					<view class="mask-view font-hanserif-bold" v-if="confirmDialog" :zoom="true" @click="closeConfirmDialog">
						<view class="confirm-box absolute" @click.stop="confirmDialog = true">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/confirm-box-bg.png`"
								mode="">
							</image>
							<view class="confirm-title absolute font-hanserif-bold">
								温馨提示
							</view>
							<view class="confirm-content absolute">
								是否使用
								<text class="color">
									徽章 * {{ confirmInfo.medal_num }} 
								</text>
								兑换
								<text class="color" v-for="(item, index) in confirmInfo.reward_items" :key="index">
									{{ item.reward_item_name }} * {{ item.item_num }}
									<template v-if="index !== confirmInfo.reward_items.length - 1">、</template>
								</text>
								？
							</view>
							<view class="confirm-btn absolute flex flex-justify-content-center">
								<view class="btn relative flex-all-center" @click.stop="confirmDialog = false">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close-btn.png`"
										mode=""></image>
								</view>
								<view class="btn relative flex-all-center" @click.stop="confirmBtn">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-sure-btn.png`"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>

					<!-- 补剂站弹框 -->
					<view class="mask-view" v-if="tonicMask" :zoom="true" @click.stop="closeTonicMask">
						<view class="tonic-mask absolute font-hanserif-bold" @click.stop="tonicMask = true">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-box-bg.png`"
								mode="">
							</image>
							<image class="tonic-close absolute"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-close-icon.png`"
								mode="" @click.stop="closeTonicMask"></image>
								
							<!-- 倒计时 -->
							<view class="tonic-down absolute flex-all-center">
								<text>倒计时：</text>
								<view class="time-box flex-all-center relative">
									<text class="relative">{{ countdownObj.h }}</text>
								</view>
								<text class="colon">:</text>
								<view class="time-box flex-all-center relative">
									<text class="relative">{{ countdownObj.m }}</text>
								</view>
								<text class="colon">:</text>
								<view class="time-box time-box-last flex-all-center relative">
									<text class="relative">{{ countdownObj.s }}</text>
								</view>
								清空
							</view>
							
							<view class="tonic-title absolute flex-justify-content-between">
								<view class="flex-align-items-center">
									<image style="width: 40rpx;height: 40rpx;"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-left-img.png`"
										mode=""></image>
									<text>当前挑战次数：</text>
									<text class="tonic-title-num" >{{ tonicInfo.reward_num }}</text>
								</view>
								
								<view class="tonic-item-btn flex-all-center">
									<!-- is_done 0未达成 1可领取 2已领取 3不可领取 -->
									
									<view class="btn1 relative flex-all-center" v-if="currentSupplyData.is_done === 2">
										<image 
											class="bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/received-btn.png`"
											mode=""></image>
										<!-- <text class="relative">已领取</text> -->
									</view>
										
									<view @click.stop="openSupplyDialog(currentSupplyData)" class="btn1 relative flex-all-center" 
										style="width: 98rpx;height: 36rpx;"
										v-else-if="currentSupplyData.is_done === 1">
										<image
											class="bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/receing-btn.png`"
											mode="">
										</image>
										<!-- <text class="relative font-color">领取</text> -->
									</view>
									
									<view @click.stop="closeTonicMask(true)" class="btn1 relative flex-all-center" v-else-if="currentSupplyData.is_done === 0">
										<image 
											class="bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/goto-reward-btn.png`"
											mode=""></image>
										<!-- <text class="relative">前往渡劫</text> -->
									</view>
									
									<view class="btn1 relative flex-all-center disabled" v-else-if="currentSupplyData.is_done === 3">
										<image 
											class="bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/recei-btn.png`"
											mode=""></image>
										<!-- <text class="relative">不可领取</text> -->
									</view>
									
								</view>
							</view>
							
							<view class="tonic-content absolute font-hanserif-bold">
								<view class="tonic-item relative flex-justify-content-between flex-align-items-center"
									v-for="(item, index) in tonicInfo.reward_config" :key="index"
									>
									<!-- is_done 0未达成 1可领取 2已领取 3不可领取 -->
									<view class="tonic-box flex-all-center">
										<image class="bg"
											:src="((item.id === currentSupplyData.id) && (item.is_done === 1 || item.is_done === 2)) ? `${commonConfigs.domainFrontFileLink}/files/images/competition/current-item-box-bg.png` : ''"
											mode=""></image>
										
										<view class="tonic-sort relative flex-all-center flex-all-center">
											<image class="bg"
												:src="((item.id === currentSupplyData.id) && (item.is_done === 1 || item.is_done === 2)) ? `${commonConfigs.domainFrontFileLink}/files/images/competition/current-sort-box-bg.png` : `${commonConfigs.domainFrontFileLink}/files/images/competition/sort-box-bg.png`"
												mode=""></image>
											<view class="relative" :style="{
												color: ((item.id === currentSupplyData.id) && (item.is_done === 1 || item.is_done === 2)) ? '#FFF' : '#5D592B'
											}">{{ index + 1 }}</view>
										</view>
																	
										<view class="tonic-left relative flex-all-center" :class="[item.is_done === 2 ? 'bar-used' : '']">
											<!-- <image class="bg"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-left-box-bg.png`"
												mode=""></image> -->
											<image class="tonic-left-img relative"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-left-img.png`"
												mode=""></image>
											<view>{{ item.name }}</view>
										</view>
									</view>
									
									<!-- <view class="bar-center relative">
										<view class="bar-samll absolute"
											:style="{width: numCalculation(tonicInfo.reward_num, item.reward_num) * 100 + '%'}">
										</view>
										<view class="bar-num absolute">
											{{ tonicInfo.reward_num >= item.reward_num ? item.reward_num : tonicInfo.reward_num }}/{{ item.reward_num }}
										</view>
									</view> -->
									
									<view class="tonic-right relative change-right flex" :class="[item.is_done === 2 ? 'bar-used' : '']">
										<view class="tonic-right-box relative flex-align-items-center flex-end">
											<!-- <image class="bg"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-right-box-bg.png`"
												mode=""></image> -->
												
											<image class="tonic-right-img relative"
												:src="item.reward_items[0].reward_item_cover" mode="heightFix"></image>
												
											<view class="tonic-right-num">
												{{ item.reward_items[0].item_num }}飞机币
											</view>
										</view>
									</view>
									
									<view class="reward-item-gap absolute" v-if="tonicInfo && tonicInfo.reward_config && index !== (tonicInfo.reward_config.length - 1)"></view>
								</view>
							</view>
							<!-- 提示 -->
							<view class="tonic-tips flex-all-center absolute">
								注意：当前活动每天限领<text style="color: red;">1</text>次<text
									style="color: #FF8B1D;">（只可领取对应一个档次请慎重领取）</text>
							</view>
						</view>
					</view>

					<!-- 补剂站二次确认弹窗 -->
					<view class="mask-view font-hanserif-bold" v-if="supplyDialog" :zoom="true" @click="closeSupplyDialog">
						<view class="confirm-box absolute" @click.stop="supplyDialog = true">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/confirm-box-bg.png`"
								mode="">
							</image>
							<view class="confirm-title absolute font-hanserif-bold">
								温馨提示
							</view>
							<view class="confirm-content absolute">
								是否领取
								<text class="color" v-for="(item, index) in supplyInfo.reward_items" :key="index">
									{{ item.reward_item_name }}*{{ item.item_num }}
									<template v-if="index !== supplyInfo.reward_items.length - 1">、</template>
								</text>
								？
								<br />
								<view style="margin-top: 30rpx; color: #f00;font-size: 24rppx;">* 只可领取一次档次奖励，请慎重选择领取！</view>
							</view>
							<view class="confirm-btn absolute flex flex-justify-content-center">
								<view class="btn relative flex-all-center" @click.stop="supplyDialog = false">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close-btn.png`"
										mode=""></image>
								</view>
								<view class="btn relative flex-all-center" @click.stop="supplyBtn">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-sure-btn.png`"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
				
					<comRuleUppop v-model="ruleFlag" :isShowPoolRuleTxt="true"
						:isShowCheckRuleFlag="isShowCheckRuleFlag" 
						type="competition" 
						ruleName="游戏说明"
						:ruleTypeValue="ruleTypeValue"
						:isNeedReadedClose="false" :isAllowedClickMaskClose="false">
						<template>
							<image style="width: 100%;" :src="ruleContentImg" mode="widthFix"></image>
						</template>
					</comRuleUppop>
				
				</view>

			</view>


		</template>
	</comRoot>
</template>

<script>
	import {
		getMedalStatusApi,
		getChallengeMedalApi,
		getMedalRewardListApi,
		getMedalRewardApi,
		getPoolChallengeItemSpeedApi,
		getPoolChallengeInfoApi,
		getAllMedalApi,
		getChallengeSupplyListApi,
		getChallengeSupplyRewardApi,
		getContentHomeApi,
		getRewardViewAgreementApi,
	} from '@/setupproject/INTERFACE';

	import {
		setCountFunDown
	} from '@/setupproject/TOOLS_FUN';

	import store from '@/store';
	import {
		ACTIONS
	} from '@/store/modules/userStore';

	export default {
		name: 'competitionPage',
		data() {
			return {
				countdownTime: '--:--:--', // 倒计时
				countdownObj: {},
				timer: null, // 定时器

				levelList: [{
						levelName: '第一层',
						scrollTop: 940,
						widthBg: '750rpx',
						heightBg: '536rpx',
						leftBg: '0',
						bottomBg: '184rpx',
					},
					{
						levelName: '第二层',
						scrollTop: 746,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '590rpx',
					},
					{
						levelName: '第三层',
						scrollTop: 595,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '897rpx',
					},
					{
						levelName: '第四层',
						scrollTop: 442,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '1204rpx',
					},
					{
						levelName: '第五层',
						scrollTop: 290,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '1511rpx',
					},
					{
						levelName: '第六层',
						scrollTop: 290,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '1818rpx',
					},
					{
						levelName: '第七层',
						scrollTop: 0,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '2125rpx',
					},
					{
						levelName: '第八层',
						scrollTop: 0,
						widthBg: '647rpx',
						heightBg: '307rpx',
						leftBg: '0',
						bottomBg: '2432rpx',
					},
					{
						levelName: '第九层',
						scrollTop: 0,
						widthBg: '647rpx',
						heightBg: '590rpx',
						leftBg: '0',
						bottomBg: '2739rpx',
					}
				],
				nowLevel: 8,
				gyms_id: '',
				rewardMask: false, //奖励弹框
				ruleFlag: false, //规则弹框
				ruleTypeValue: 0, // 购买协议类型值
				isShowCheckRuleFlag: true, // 是否需要显示复选框提示语：今天不再提示
				ruleContent: '', //规则内容
				ruleContentImg: '', //规则图片
				boxMask: false, //宝箱弹框
				rewardConfig: '', //兑换列表
				scene_medal_count: 0, //徽章总数
				medal_reward_status: 0, //可兑换状态
				newReload: false, // 是否需要刷新数据：因下一页面回退当前页数据未刷新
				gymsInfo: {},
				
				rewardDialog: false, //领取弹框
				
				resultInfo: {},
				isPlatformPC: false, //PC端标识
				previewLoading: true,
				confirmDialog: false, //兑换二次确认
				confirmInfo: {},
				info: {},
				tonicMask: false, //补剂站弹框
				tonicInfo: {},
				currentSupplyData: {}, // 当前可领取补给数据
				dialog_medal_num: 1,
				supplyDialog: false,
				supplyInfo: {},
				supplyDot: 0, //补剂站可领取
				supplyFlag: true, //补剂站标识
			};
		},
		computed: {
			commonOnline() {
				return store.getters.commonOnline;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		// onPageScroll(res){
		// 	console.log("scrollTop:", res.scrollTop); // 距离页面顶部距离
		// },
		async onLoad({
			id
		}) {
			this.gyms_id = id;

			this.getMedalStatusFun();
			// this.getMedalRewardListFun();
			this.viewRewardAgreement();

			this.timer = setInterval(() => {
				this.countdownTime = setCountFunDown();
				this.countdownObj = setCountFunDown('objType');
			}, 1000);

			uni.getSystemInfo({
				success: (res) => {
					console.log('getSystemInfo,', res.platform);
					// windows | mac为pc端
					// android | ios为手机端
					if (['windows', 'mac'].indexOf(res.platform) !== -1) {
						this.isPlatformPC = true;
					} else {
						this.isPlatformPC = false;
					}
				}
			});

		},
		onUnload() {
			// 清除倒计时定时器
			clearInterval(this.timer);
		},
		async onShow() {
			// 是否需要刷新数据：因下一页面回退赏袋页数据未刷新
			if (this.newReload) {
				this.newReload = false;
				this.getMedalStatusFun();
				this.getMedalRewardListFun();
				this.getPoolChallengeInfoApi();
			}
		},
		onHide() {
			// 是否需要刷新数据：因下一页面回退当前页数据未刷新
			this.newReload = true;
		},
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.info.gyms_name,
					path: `/secondary/competitionPage/competitionPage?id=${this.gyms_id}`,
					imageUrl: this.info.gyms_cover_image,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		methods: {
			execAfterToken() {
				this.getMedalStatusFun();
				this.getMedalRewardListFun();
				this.getPoolChallengeInfoApi();
			},
			
			share() {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.info.gyms_name,
					path: `/secondary/competitionPage/competitionPage?id=${this.gyms_id}`,
					imageUrl: this.info.gyms_cover_image,
					content: '',
					desc: ''
				});
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},

			async getPoolChallengeInfoApi() {
				const {
					data,
					code,
					msg
				} = await getPoolChallengeInfoApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.info = data;
				
				this.supplyDot = data.gyms_supply_enable || 0;
				this.medal_reward_status = data.medal_reward_status || 0;
			},
			gooPageFun(url) {
				if (!url) return;

				uni.navigateTo({
					url: url
				});
			},
			gooDetailFun(item) {
				// challenge_status 挑战状态: 0未挑战, 1挑战中, 2完成挑战
				if (item.challenge_status === 0) {
					return uni.showToast({
						icon: 'none',
						title: '当前层未解锁'
					});
				} else if (item.challenge_status === 2) {
					return uni.showToast({
						icon: 'none',
						title: '当前层已完成'
					});
				}
				
				this.gooPageFun(`/secondary/competitionDetailPage/competitionDetailPage?id=${this.gyms_id}`);
			},
			goCompeDetailFun() {
				this.gooDetailFun(this.levelList[this.nowLevel]);
			},
			gooPageUrl() {
				uni.navigateTo({
					url: '/secondary/bagPage/bagPage'
				});
			},
			async setRefreshFun() {
				store.commit('SHOW_LOADING_SET_FUN', true);
				await this.getMedalStatusFun();
				await this.getPoolChallengeInfoApi();
				store.commit('SHOW_LOADING_SET_FUN', false);
			},
			async getMedalStatusFun() {
				const {
					data,
					code,
					msg
				} = await getMedalStatusApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				data.list.map((item, index) => {
					this.levelList[index] = {
						...this.levelList[index],
						...item
					};

					// 当前层
					if (item.challenge_status === 1) this.nowLevel = index;
				});
				
				// this.nowLevel = 9; // 模拟层数
				// 跳转到当前位置
				uni.pageScrollTo({
					// scrollTop: this.levelList[this.nowLevel === 0 ? 0 : this.nowLevel - 1].scrollTop,
					scrollTop: this.levelList[this.nowLevel].scrollTop,
					// scrollTop: 200,
					duration: 0,
				});
			},
			
			// 徽章兑换
			async openRewardMask() {
				this.rewardMask = true;
				this.getMedalRewardListFun();
			},
			closeRewardMask() {
				this.rewardMask = false;
			},
			async getMedalRewardListFun() {
				const {
					data,
					code,
					msg
				} = await getMedalRewardListApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.rewardConfig = data.reward_config;
				this.scene_medal_count = data.scene_medal_count;
			},
			async receive(item) {
				if (this.scene_medal_count < item.medal_num) {
					return uni.showToast({
						icon: 'none',
						title: '徽章数量不足'
					});
				}
				this.confirmDialog = true;
				this.confirmInfo = item;
			},
			async confirmBtn() {
				const {
					data,
					code,
					msg
				} = await getMedalRewardApi({
					gyms_id: this.gyms_id,
					reward_config_id: this.confirmInfo.id
				});

				this.confirmDialog = false;

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}


				uni.showToast({
					icon: 'success',
					title: msg
				});

				this.getMedalRewardListFun();
				this.getPoolChallengeInfoApi();
			},
			closeConfirmDialog() {
				this.confirmDialog = false;
			},
			async receiveBtn(item, index) {
				const {
					data,
					code,
					msg
				} = await getChallengeMedalApi({
					gyms_id: this.gyms_id,
					gyms_scene_id: item.gyms_scene_id //场景ID
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				this.rewardDialog = true;
				this.resultInfo = data;
				this.dialog_medal_num = 1;

				this.levelList[index].medal_status = 2;
				this.$forceUpdate();
				this.getMedalRewardListFun();
			},
			async openBoxMask() {
				this.previewLoading = true;
				this.boxMask = true;
				
				const {
					data,
					code,
					msg
				} = await getPoolChallengeItemSpeedApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					this.previewLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.gymsInfo = data;
				this.previewLoading = false;
			},
			closeBoxMask() {
				this.boxMask = false;
			},
			// 玩法说明
			async viewRewardAgreement() {
				this.ruleTypeValue = 41;
				getRewardViewAgreementApi({
					id: 41
				}).then(res => {
					if (res.code === 200 && res.data.reward_agreement) {
						// 是否需要显示复选框提示语：今天不再提示
						this.isShowCheckRuleFlag = false;
					}

					// 购买协议是否弹窗
					if (res.code === 200 && !res.data.reward_agreement) {
						this.setShowRuleFun();
					}
				})
			},
			async setShowRuleFun() {
				this.ruleFlag = true;
				getContentHomeApi({
					type: 83
				}).then((res) => {
					// this.ruleContent = res.data.content;
					this.ruleContentImg = res.data.content_image;
				});
			},
			
			gooShopDetailFun(item, index) {
				item.reward_price_1 = this.info.reward_price_1;
				this.$store.commit('INFINITE_DETAILS_SET_FUN', item);
				
				uni.navigateTo({
					url: '/secondary/goodDetailPage/goodDetailPage?type=infinite'
				});
			},
			
			closeRewardDialog() {
				this.rewardDialog = false;
			},
			async allReceive() {
				const {
					data,
					code,
					msg
				} = await getAllMedalApi({
					gyms_id: this.gyms_id,
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				this.rewardDialog = true;
				this.resultInfo = data;
				this.dialog_medal_num = data.medal_num;
				this.getMedalRewardListFun();
				this.getMedalStatusFun();
				this.getPoolChallengeInfoApi();
			},
			closeTonicMask(isGo = '') {
				if(isGo === true) this.goCompeDetailFun();
				this.tonicMask = false;
			},
			closeSupplyDialog() {
				this.supplyDialog = false;
			},
			openSupplyDialog(item) {
				this.supplyInfo = item;
				this.supplyDialog = true;
			},
			async getTonicDialog() {
				const {
					data,
					code,
					msg
				} = await getChallengeSupplyListApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				this.tonicInfo = data;
				this.tonicMask = true;
				
				// is_done 0未达成 1可领取 2已领取 3不可领取
				if(this.tonicInfo && this.tonicInfo.reward_config) {
					let currentSupplyData0 = []; 
					let currentSupplyData1 = []; 
					let currentSupplyData2 = []; 
					let currentSupplyData3 = [];
					 
					this.tonicInfo.reward_config.map(item => {
						if(item.is_done === 3) {
							currentSupplyData3.push(item)
						}else if(item.is_done === 2) {
							currentSupplyData2.push(item)
						}else if(item.is_done === 1) {
							currentSupplyData1.push(item)
						}else{
							currentSupplyData0.push(item)
						}
					});
					
					if(currentSupplyData2.length) {
						this.currentSupplyData = currentSupplyData2[currentSupplyData2.length - 1];
					}else if(currentSupplyData1.length) {
						this.currentSupplyData = currentSupplyData1[currentSupplyData1.length - 1];
					}else if(currentSupplyData0.length) {
						this.currentSupplyData = currentSupplyData0[currentSupplyData0.length - 1];
					}else if(currentSupplyData3.length) {
						this.currentSupplyData = currentSupplyData3[currentSupplyData3.length - 1];
					}
				}
				
			},
			async supplyBtn() {
				const {
					data,
					code,
					msg
				} = await getChallengeSupplyRewardApi({
					gyms_id: this.gyms_id,
					reward_config_id: this.supplyInfo.id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				uni.showToast({
					icon: 'success',
					title: msg
				});

				this.supplyDialog = false;
				this.getTonicDialog();
				this.getPoolChallengeInfoApi();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.competition-page {

		.competition-list-content {
			width: 100%;
			overflow: hidden;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 3500rpx;
			
			.list-content {
				left: 0;
				bottom: 0;
				width: 100%;
				height: 3500rpx;
				overflow-y: auto;

				.list-content-item {
					width: 290rpx;
					height: 260rpx;
					
					.list-item-title {
						left: 264rpx;
						bottom: 230rpx;
						font-size: 32rpx;
						color: #FEFEFF;
					}

					.success-challenge-icon {
						left: 270rpx;
						bottom: 136rpx;
						margin: auto;
						width: 90rpx;
						height: 90rpx;
					}

					.nostart-challenge-icon {
						left: 270rpx;
						bottom: 136rpx;
						margin: auto;
						width: 90rpx;
						height: 90rpx;
					}

					.being-challenge-icon {
						left: 270rpx;
						bottom: 136rpx;
						margin: auto;
						width: 90rpx;
						height: 90rpx;
					}

					.receive-btn {
						left: 246rpx;
						margin: auto;
						width: 140rpx;
						height: 46rpx;
						bottom: 38rpx;

						&.receive-btn-challenge {
							// bottom: 0rpx;
						}
						
						&.preview-receive-btn {
							// bottom: 0rpx;
						}
					}
					
					// 特殊处理第一层
					&.level-1 {
						.list-item-title {
							left: 264rpx;
							bottom: 324rpx;
							font-size: 32rpx;
							color: #FEFEFF;
						}
						
						.success-challenge-icon {
							left: 270rpx;
							bottom: 216rpx;
							margin: auto;
							width: 90rpx;
							height: 90rpx;
						}
						
						.nostart-challenge-icon {
							left: 270rpx;
							bottom: 216rpx;
							margin: auto;
							width: 90rpx;
							height: 90rpx;
						}
						
						.being-challenge-icon {
							left: 270rpx;
							bottom: 216rpx;
							margin: auto;
							width: 90rpx;
							height: 90rpx;
						}
						
						.receive-btn {
							left: 246rpx;
							margin: auto;
							width: 140rpx;
							height: 46rpx;
							bottom: 136rpx;
						
							&.receive-btn-challenge {
								// bottom: 0rpx;
							}
							
							&.preview-receive-btn {
								// bottom: 0rpx;
							}
						}
					}
				}
			}

			.side-btn-box {
				width: 80rpx;
				top: 210rpx;
				right: 30rpx;

				&.overflowViewPC {
					top: 126rpx;
				}

				.side-btn {
					width: 80rpx;
					height: 93rpx;
					margin-bottom: 60rpx;

					.side-btn-flag {
						left: -30rpx;
						top: -6rpx;
						width: 80rpx;
						height: 28rpx;
					}
				}

				.exchange-box {
					width: 80rpx;
					height: 93rpx;
					margin-bottom: 60rpx;

					.exchange-box-flag {
						left: -30rpx;
						top: -6rpx;
						width: 80rpx;
						height: 28rpx;
					}
				}
				
				.exchange-time {
					left: -18rpx;
					bottom: -90rpx;
					min-width: 120rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					color: #E3670E;
					font-size: 20rpx;
					
					& > view {
						height: 30rpx;
						line-height: 30rpx;
					}
				}
				
			}
		}
	}

	// 弹框蒙版
	.mask-view {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		color: #fff;

		// 兑换弹框
		.reward-content {
			color: #FF8B1D;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 670rpx;
			height: 951rpx;
			padding: 0 25rpx;

			.reward-close {
				right: 20rpx;
				top: 88rpx;
				width: 50rpx;
				height: 52rpx;
				z-index: 10;
			}
			
			.countdown-time {
				width: 100%;
				top: 96rpx;
				font-size: 28rpx;
				color: #111111;
		
				.time {
					width: 24rpx;
					height: 28rpx;
					margin-left: 16rpx;
					margin-right: 10rpx;
				}
		
				.time-box {
					margin: 0 4rpx;
					width: 42rpx;
					height: 42rpx;
					background: #BDCAE2;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			
			.badge-box {
				top: 136rpx;
				left: 30rpx;
				font-size: 28rpx;
				color: #111111;
			
				.badge-img {
					width: 56rpx;
					height: 52rpx;
				}
			
				.badge-num {
					color: #FF8B1D;
					font-weight: bold;
				}
			}
			
			.reward-list-box {
				top: 240rpx;
				left: 50rpx;
				width: 86%;
				height: 660rpx;
				overflow-y: auto;

				.reward-item {
					width: 100%;
					height: 168rpx;
					margin-bottom: 20rpx;
					// padding: 16rpx 20rpx 10rpx 26rpx;
					font-size: 24rpx;
					color: #fff;

					.change-left {
						width: 128rpx;
						white-space: nowrap;
						text-align: center;
						font-size: 18rpx;
						color: #fff;

						&.change-right {
							width: 128rpx;

							.change-right-img {
								margin-top: 10rpx;
								width: 80rpx;
								height: 80rpx;
							}
						}

						.exchange-left-box {
							width: 124rpx;
							height: 124rpx;

							.exchange-left-img {
								width: 100rpx;
								height: 100rpx;
							}

							.exchange-left-num {
								right: 4rpx;
								bottom: 4rpx;
								
								min-width: 45rpx;
								padding: 0 8rpx;
								height: 22rpx;
								// background: rgba(0, 0, 0, 0.4);
								// border-radius: 20rpx 0rpx 10rpx 0rpx;
							}
						}

						.change-left-text {
							width: 98rpx;
							margin-top: 8rpx;
						}
					}

					.exchange-center {
						width: 103rpx;
						text-align: center;

						.center-img-box {
							width: 103rpx;
							height: 75rpx;
						}

						.center-img-txt {
							margin-top: 6rpx;
							font-size: 24rpx;
							color: #111111;
						}
					}

					.exchange-btn {
						width: 124rpx;
						height: 46rpx;

						.btn-img {
							width: 124rpx;
							height: 46rpx;
						}

						.btn-text {
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}
				}
				
				.reward-item-gap {
					width: 100%;
					height: 2rpx;
					background: #AAB3C5;
					// left: 30rpx;
					bottom: 0;
				}
				
			}

		}

		// 宝箱弹框
		.box-content {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 670rpx;
			height: 831rpx;
			padding: 0 25rpx;

			.box-content-list {
				left: 0;
				right: 0;
				top: 100rpx;
				margin: auto;
				width: 100%;
				height: 710rpx;
				overflow-y: auto;
				flex-wrap: wrap;
				align-content: flex-start;
				
				.bag-goods-list {
					padding: 12rpx 18rpx;
					color: #FFF;
				}
					
				.content-pool-detail {
					width: 160rpx;
					margin-right: 10rpx;
					margin-bottom: 22rpx;
					
					.bag-goods-type {
						top: 6rpx;
						left: 6rpx;
						
						.bag-goods-type-img {
							height: 34rpx;
							z-index: 98;
						}
					}
					
					.content-pool-cover {
						width: 160rpx;
						height: 177rpx;
						
						.pool-cover-img {
							width: 126rpx;
							height: 130rpx;
							overflow: hidden;
						}
					}
					
					.content-pool-txt {
						width: 100%;
						height: 26rpx;
						line-height: 26rpx;
						color: #111111;
						font-size: 26rpx;
						text-align: center;
						margin-top: 6rpx;
					}
					
					.content-item-price {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #88875A;
						text-align: center;
					}
					
					.content-item-rate {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #FF8B1D;
						text-align: center;
					}
						
				}
				
			}

			.box-close-box {
				width: 290rpx;
				height: 82rpx;
				left: 0;
				right: 0;
				bottom: -100rpx;
				margin: auto;
				
			}
		}

		// 领取弹框
		.reward-box {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 750rpx;
			height: 1038rpx;
			transform: translateY(-50rpx);

			.reward-text {
				bottom: 260rpx;
				left: 0;
				right: 0;
				margin: auto;
				width: 231rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 32rpx;
				color: #fff;

				.text {
					max-width: 100%;
					text-align: center;
				}
			}

			.tips {
				width: 556rpx;
				height: 26rpx;
				text-align: center;
				bottom: 50rpx;
				left: 0;
				right: 0;
				margin: auto;
			}
		}

		// 二次确认
		.confirm-box {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			transform: translateY(-50rpx);
			width: 550rpx;
			height: 320rpx;
			font-size: 32rpx;
			color: #333333;

			.confirm-title {
				left: 0;
				right: 0;
				margin: 0 auto;
				top: 40rpx;
				font-size: 50rpx;
				color: #184971;
				text-align: center;
			}

			.confirm-content {
				left: 0;
				top: 130rpx;
				width: 100%;
				height: 240rpx;
				margin: auto;
				overflow-y: auto;
				text-align: center;

				.color {
					color: #FF8B1D;
				}
			}

			.confirm-btn {
				bottom: -88rpx;
				left: 0;
				width: 100%;

				.btn {
					width: 213rpx;
					height: 60rpx;
				}

				.btn+.btn {
					margin-left: 40rpx;
				}
			}
		}

		// 补剂站弹框
		.tonic-mask {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			transform: translateY(-50rpx);
			width: 670rpx;
			height: 951rpx;

			.tonic-close {
				z-index: 10;
				right: 20rpx;
				top: 88rpx;
				width: 50rpx;
				height: 52rpx;
			}
			
			.tonic-down {
				width: 100%;
				font-size: 28rpx;
				color: #111111;
				top: 96rpx;
				

				.time {
					width: 24rpx;
					height: 28rpx;
					margin-left: 16rpx;
					margin-right: 10rpx;
				}

				.time-box {
					margin: 0 4rpx;
					width: 42rpx;
					height: 42rpx;
					background: #899ABA;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.time-box-last {
					margin-right: 10rpx;
				}

				.colon {
					margin: 8rpx;
				}
			}

			.tonic-title {
				width: 590rpx;
				left: 44rpx;
				font-size: 28rpx;
				color: #111111;
				padding: 0 16rpx;
				top: 180rpx;	
				.tonic-title-num {
					color: #FF8B1D;
					font-size: 32rpx
				}
				
				.tonic-item-btn {
					width: 128rpx;
					margin-left: 30rpx;
				
					.btn1 {
						width: 128rpx;
						height: 36rpx;
				
						&.disabled {
							-webkit-filter: grayscale(100%);
							-moz-filter: grayscale(100%);
							-o-filter: grayscale(100%);
							filter: grayscale(100%);
							filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
							color: #999;
							opacity: 0.6;
						}
					}
				}
			}

			.tonic-content {
				overflow-y: auto;
				top: 240rpx;
				left: 50rpx;
				height: 660rpx;
				
				.tonic-item {
					width: 100%;
					height: 120rpx;
					font-size: 28rpx;
					color: #111111;
					padding: 0 20rpx 0 0rpx;
					
					.tonic-sort {
						width: 74rpx;
						height: 74rpx;
						font-size: 32rpx;
						color: #6B88BE;
					}

					.tonic-left {
						// width: 40rpx;
						// height: 40rpx;
						margin-left: 20rpx;
						
						.tonic-left-img {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.bar-center {
						width: 150rpx;
						height: 24rpx;
						background: #F5F2D2;
						box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(142,139,102,0.7);
						border-top: 2rpx solid #F5F2D2;
						border-bottom: 2rpx solid #F5F2D2;
						box-sizing: border-box;

						.bar-samll {
							top: -4rpx;
							left: -1rpx;
							height: 28rpx;
							
							background: linear-gradient(to top, #CE5F1E, #EC9F4C);
							border-top: 2rpx solid #F5F2D2;
							border-bottom: 2rpx solid #F5F2D2;
						}

						.bar-num {
							left: 0;
							bottom: -36rpx;
							width: 100%;
							text-align: center;
							font-size: 24rpx;
							color: #111111;
						}
					}
					
					.tonic-right {
						width: 300rpx;
				
						.tonic-right-box {
							width: 100%;
							height: 40rpx;
							overflow: hidden;
					
							.tonic-right-img {
								width: 40rpx;
								height: 40rpx;
							}
					
							.tonic-right-num {
								height: 40rpx;
								line-height: 40rpx;
							}
						}
					
						.change-left-text {
							width: 98rpx;
							margin-top: 8rpx;
						}
						
					}
					
					.bar-used {
						-webkit-filter: grayscale(100%);
						-moz-filter: grayscale(100%);
						-o-filter: grayscale(100%);
						filter: grayscale(100%);
						filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
						color: #999;
						opacity: 0.6;
					}
				}
			}
			
			.reward-item-gap {
				width: 100%;
				height: 1rpx;
				background: #AAB3C5;
				left: 0rpx;
				bottom: 0rpx;
			}

			.tonic-tips {
				width: 100%;
				text-align: center;
				bottom: 22rpx;
				font-size: 20rpx;
				color: #111111;

				.tips {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			.tonic-footer {
				left: 0;
				right: 0;
				bottom: -70rpx;
				margin: auto;
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #C3B3FF;

				&::before {
					content: '';
					position: absolute;
					left: 26rpx;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 243rpx;
					height: 1rpx;
					background: rgba($color: #AA94FD, $alpha: 0.35);
				}

				&::after {
					content: '';
					position: absolute;
					right: 26rpx;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 243rpx;
					height: 1rpx;
					background: rgba($color: #AA94FD, $alpha: 0.35);
				}
			}
		}
	}

	.new-tag {
		left: 0;
		top: 0;
		width: 117rpx;
		height: 37rpx;
		padding-left: 15rpx;
		font-size: 18rpx;
		white-space: nowrap;

		&.new-tag-other {
			left: -20rpx;
			top: -18rpx;
			width: 93rpx;
			height: 57rpx;
			line-height: 57rpx;
			padding-left: 35rpx;
		}
	}

	.page-bottom-content {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 209rpx;
		
		.share-button {
			top: 60rpx;
			left: 50rpx;
			width: 125rpx;
			height: 52rpx;
			.share-button-img {
				width: 100%;
				height: 100%;
			}
		}

		.goto-btn {
			left: 0;
			right: 0;
			top: 42rpx;
			margin: auto;
			width: 317rpx;
			height: 81rpx;
		}

		.goto-title {
			top: 130rpx;
			left: 0;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #666666;

			.goto-title-txt {
				color: #FF8B1D;
			}
		}

		.all-receive-box {
			top: 42rpx;
			right: 50rpx;
			width: 81rpx;
			height: 81rpx;
		}
	}
</style>